<div class="cil-search-block">
  <form
    class="cil-search__form"
    nz-form
    nzLayout="vertical"
  >
    <div
      nzType="flex"
      nz-row
      [nzGutter]="24"
      nzAlign="middle"
    >
      <div
        nz-col
        [nzSpan]="6"
        *ngFor="let item of data"
      >
        <nz-form-item>
          <nz-form-label class="cil__search-form-label">
            <ng-container *ngIf="item.labelI18n; else normalLabel">{{item.labelI18n | i18n}}</ng-container>
            <ng-template #normalLabel>
              <ng-container>{{item.label}}</ng-container>
            </ng-template>
            <i class="cil-delete-icon" *ngIf="item.custom" nz-icon type="minus-circle" nzTheme="fill" (click)="removeCustomItem(item)"></i>
          </nz-form-label>
          <nz-form-control>

            <!-- 自定义模板 -->
            <!--
            <ng-template *ngIf="item.component" item.component></ng-template>
            -->
            <ng-container *ngTemplateOutlet="item.component"></ng-container>

            <input nz-input [maxLength]="maxLength(item.index)" *ngIf="item.type === 'input'" [(ngModel)]="item.value" name="{{item.label}}" [placeholder]="'GENERAL.INFO.PLEASE_INPUT' | i18n" />

            <nz-select
              nzAllowClear
              *ngIf="item.type === 'selection'"
              [(ngModel)]="item.value"
              name="{{item.label}}"
            >
              <nz-option *ngFor="let option of item.options" nzValue="{{option.value}}" nzLabel="{{option.label}}"></nz-option>
            </nz-select>

            <nz-date-picker [nzAllowClear]="item.allowClear !== undefined ? item.allowClear : allowClear" *ngIf="item.type === 'date'" [(ngModel)]="item.value" name="{{item.label}}" ></nz-date-picker>

            <nz-range-picker
              [nzAllowClear]="item.allowClear !== undefined ? item.allowClear : allowClear "
              #datePicker
              *ngIf="item.type === 'dateRange'"
              [(ngModel)]="item.value"
              (ngModelChange)="handleRangePickerChange($event, item.dateLimitType, item)"
              name="value"
              [nzDisabledDate]="disabledDate"
            ></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div
        nz-col
        class="cil-search-btn"
        [nzSpan]="6"
      >
        <nz-form-item>
          <button class="cil__custom-btn__search" nz-button nzShape="round" nzType="primary" (click)="search()">{{'COMPONENT.SEARCH_COM.SEARCH' | translate}}</button>
        </nz-form-item>
      </div>
    </div>
  </form>
  <!-- 自定义搜索条件 -->
  <!-- <nz-divider class="cil-divider" nzType="horizontal" nzDashed="true" ></nz-divider>
  <form
    class="cil-search__form"
    nz-form
    nzLayout="vertical"
  >
    <div
      nzType="flex"
      nz-row
      [nzGutter]="24"
      nzAlign="middle"
    >
      <div
        nz-col
        [nzSpan]="6"
      >
        <nz-form-item>
          <nz-form-label>
            {{'COMPONENT.SEARCH_COM.CUSTOM_CONDITION' | translate }}
          </nz-form-label>
          <nz-form-control>
            <nz-select
              #customOption
              [nzAllowClear]="true"
              (nzOpenChange)="changeCustomItem(customOption.value)"
            >
              <nz-option
                *ngFor="let item of customItems"
                [nzLabel]="item.label"
                [nzValue]="item.index"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div
        nz-col
        [nzSpan]="6"
      >
        <nz-form-item>
          <nz-form-label>
            {{'COMPONENT.SEARCH_COM.ENTER_VALUE' | translate }}
          </nz-form-label>
          <nz-form-control>
            <input *ngIf="!chosenItem || chosenItem.type === 'input'" nz-input />
            <nz-select *ngIf="chosenItem && chosenItem.type === 'selection'">
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div
        nz-col
        class="cil-search-btn"
        [nzSpan]="6"
      >
        <nz-form-item>
          <button
            nz-button
            class="cil__custom-btn__add-search"
            nzShape="round"
            nzType="primary"
            nzSize="small"
            (click)="addCustomItem()"
          >{{'COMPONENT.SEARCH_COM.ADD_CUSTOM' | translate}}</button>
        </nz-form-item>
      </div>
    </div>
  </form> -->
</div>
